body {
    margin: 0;
    display: flex;
    height: 100vh; /* 设置页面高度 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    overflow-x: hidden;
    font-family: 'SongTi', serif; /* 将全局字体设置为宋体 */
}

.sidebar { /*导航*/
    width: 20%; /* 左侧导航宽度为页面的五分之一 */
    background: linear-gradient(135deg, #cfe1f5, #eaf1fb);; /* 浅蓝白渐变 */
    color: white;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.content { /*主体内容*/
    width: 80%; /* 主内容区宽度为页面的五分之四 */
    padding: 20px;
    box-sizing: border-box; /* 包含内边距和边框 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    background: linear-gradient(to right, #99CCff, #ffffff);
    position: relative;

}

.hidden {
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    display: none; /* 隐藏导航 */
}

.button1 { /*导航中的按钮样式*/
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start;
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    border: none; /* 不显示边框 */
    background-color: transparent; /* 背景颜色透明 */
    color: rgb(128, 128, 128); /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标悬停时为手型光标 */
    border-radius: 5px; /* 圆角半径 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    width: 19.5vw;

}

a {
    text-decoration: none; /* 去掉下划线 */

}

.button1-icon {
    width: 30px; /* 图标宽度 */
    margin-right: 10px; /* 图标与文本之间的间距 */
}


.button1:hover {
    background-color: #d3d3d3; /* 悬停时背景色为浅灰色 */
    color: #336699; /* 悬停时文本颜色变为蓝色 */
    font-weight: bold;

}

.button2 { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 75%; /* 根据需要调整位置 */
    left: 0;
    color: white;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: #336699;
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s; /* 背景色和文本颜色的过渡效果 */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
}

.button3 { /*导航右侧上标签样式*/
    padding: 10px; /* 按钮内边距 */
    margin: 5px 0; /* 上下外边距 */
    position: absolute; /* 按钮 2 绝对定位 */
    top: 90%; /* 根据需要调整位置 */
    left: 0;
    transform: translateY(-50%); /* 垂直中心对齐 */
    border: #336699 solid 2px;
    background-color: transparent; /* 背景颜色透明 */
    color: #336699; /* 初始文本颜色为灰色 */
    font-size: 16px; /* 字体大小 */
    border-radius: 0px 10px 10px 0; /* 圆角 */
    transition: background-color 0.3s, color 0.3s;
}
.button3:hover{
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    background-color: #336699;
    color: white;
}


.button4 { /*隐藏导航按钮样式*/
    width: 30px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    background-color: #d3d3d3; /* 按钮背景色 */
    border: none; /* 去掉边框 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 启用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    cursor: pointer; /* 鼠标悬停时变成手型 */
    transition: background-color 0.3s, color 0.3s;
}

.button4:hover {
    background-color: rgb(128, 128, 128);
}

.button4-icon {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
}

.logo { /*导航左上角的深蓝色方块*/
    left: 0;
    width: 60px; /* 方块的宽度 */
    height: 60px; /* 方块的高度 */
    border-radius: 10px; /* 圆角 */
    margin-right: 10px; /* 方块和标题之间的间距 */
}

.title {
    position: absolute;
    font-size: 20px;
    color: #336699; /* 标题字体大小 */
    font-weight: bold;
    display: inline;
    top: 5px;
    left: 70px;
}
.underline { /*导航中下划线样式*/
    width: 100%; /* 下划线全宽 */
    height: 2px; /* 下划线高度 */
    background-color: rgb(128, 128, 128); /* 灰色下划线 */
}

.Table-text-container {
    position: relative;
    left: 0;
    transform: translateY(-50%); /* 精确垂直居中 */
}

#drop-area {
    width: 70%;
    height: 25%;
    margin: 0 auto;
    background-color: #e7f1fd;
    position: relative;
    border: 1px solid #d8c4f7; /* 添加紫色边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    text-align: center;
}

#text-input-area{
    width: 70%;
    height: 23%;
    margin: 4% auto;
    background-color: #e7f1fd;
    position: relative;
    border: 1px solid #0378b6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    text-align: center;
}

#ready-area{
    width: 70%;
    height: 23%;
    margin: 0 auto;
    background-color: #e7f1fd;
    position: relative;
    border: 1px solid #a1c3fd; /* 添加紫色边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
    text-align: center;
}

.icon-container{
    width: 20%;
    height: 25%;
    position: absolute;
    margin-top: -27px;
    background-color: #d8c4f7;
    border: 1px solid #fdfdfd;
    border-radius: 8px 8px 0 0; /* 圆角 */
}

.input-icon-container{
    width: 20%;
    height: 25%;
    position: absolute;
    margin-top: -27px;
    background-color: #0378b8;
    border: 1px solid #fdfdfd;
    border-radius: 8px 8px 0 0; /* 圆角 */
}

.ready-icon-container{
    width: 20%;
    height: 25%;
    position: absolute;
    margin-top: -27px;
    background-color: #a1c3fd;
    border: 1px solid #fdfdfd;
    border-radius: 8px 8px 0 0; /* 圆角 */
}

.upload-icon {
    margin-top: 20px;
}

.ready-icon{
    margin-top: 0.5%;
}

.upload-text {
    font-size: 16px; /* 文字大小 */
    color: #2b2b2b; /* 深灰色文字 */
    margin: 0;
}

.input-text{
    font-size: 15px; /* 文字大小 */
    color: #2b2b2b; /* 深灰色文字 */
    margin-top: 5%;
    margin-right: 6%;
}

#textInput{
    width: 20%;
    height: 23%;
}

.ready-text{
    font-size: 19px; /* 文字大小 */
    color: #2b2b2b; /* 深灰色文字 */
    margin-top: 5%;
}

.hidden-file-input {
    display: none; /* 隐藏文件输入 */
}

.upload-btn {
    margin-top: 25px; /* 按钮上方间距 */
    padding: 2px 20px 4px; /* 按钮内间距 */
    font-size: 16px; /* 按钮文字大小 */
    color: #fff; /* 白色文字 */
    background-color: #0876bd; /* 蓝色背景 */
    border: none; /* 无边框 */
    border-radius: 8px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.upload-btn:hover {
    background-color: #0056b3; /* 鼠标悬停时按钮背景变深蓝色 */
}

.start-btn{
    margin: 2% 44% auto;
    padding: 5px 50px 7px; /* 按钮内间距 */
    font-size: 16px; /* 按钮文字大小 */
    color: #fff; /* 白色文字 */
    background-color: #0576ba; /* 蓝色背景 */
    border-radius: 8px; /* 圆角 */
    cursor: pointer; /* 鼠标悬停时显示为手形 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
    border: 1px solid #fdfdfd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
}
.start-btn:hover {
    background-color: #0056b3; /* 鼠标悬停时按钮背景变深蓝色 */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5); /* 添加立体阴影 */
}